<template>
  <div id="container"></div> 
</template>

<script>
import zjMapData from '@/assets/bdmap/zj';
import hangzhou from '@/assets/bdmap/hangzhou';
import huzhou from '@/assets/bdmap/huzhou';
import jiaxing from '@/assets/bdmap/jiaxing';
import jinhua from '@/assets/bdmap/jinhua';
import lishui from '@/assets/bdmap/lishui';
import ningbo from '@/assets/bdmap/ningbo';
import quzhou from '@/assets/bdmap/quzhou';
import shaoxing from '@/assets/bdmap/shaoxing';
import taizhou from '@/assets/bdmap/taizhou';
import wenzhou from '@/assets/bdmap/wenzhou';
import zhoushan from '@/assets/bdmap/zhoushan';

import mapJson from '@/assets/bdmap/custom_map_config.json';

const BMapGL = window.BMapGL
export default {
  data () {
    return {
      map: null,
      cityData:[
        hangzhou,
        huzhou,
        jiaxing,
        jinhua,
        lishui,
        ningbo,
        quzhou,
        shaoxing,
        taizhou,
        wenzhou,
        zhoushan
      ]
    }
  },

  methods: {
    initMap () {
      this.map = new BMapGL.Map('container')
      const map = this.map
      map.centerAndZoom(new BMapGL.Point(...zjMapData.center), 8)
      //设置地图显示元素
      map.setDisplayOptions({
        // 隐藏poi图标
        poiIcon:false
      })
      //开启鼠标滚轮缩放
      map.enableScrollWheelZoom(true)
      // 设置个性化地图，参数为个性化配置对象
      map.setMapStyleV2({styleJson:mapJson})
    },
    addMapOverlay () {
      const map = this.map
      // 绘制省边界
      const zjPolyline = this._makePolylineData(zjMapData.polyline)
      for(let i = 0;i < zjPolyline.length; i++) {
        // 折线覆盖物
        const ply = new BMapGL.Polyline(zjPolyline[i], {
          strokeColor: '#00F0FF',
          strokeWeight: 4,
          outlineColor: '#1c00ff'
        })
        // 将覆盖物添加到地图中，一个覆盖物实例只能向地图中添加一次
        map.addOverlay(ply)
      }

      // 绘制市边界
      this.cityData.forEach(city => {
        const cityLine = this._makePolylineData(city.polyline)
        const name = city.name
        for(let i = 0; i < cityLine.length; i++) {
          // Polyline 需要传入的第一个参数是Point类型
          const ply = new BMapGL.Polyline(cityLine[i], {
            strokeColor: '#00F0FF',
            strokeWeight: 2
          })
          map.addOverlay(ply)

          // Polygon：创建多边形覆盖物---》为各市级区域增加填充色
          const plg = new BMapGL.Polygon(cityLine[i], {
            fillColor:'#22406b',
            fillOpacity:.6
          })
          plg.customData = {name}
          map.addOverlay(plg)
        }
        // 创建一个文本标注实例。第一个参数为内容，position指定文本标注所在的地理位置
        const point = new BMapGL.Point(...city.center)
        const label = new BMapGL.Label(name, {
          position: point
        })
        label.setStyle({
          color: '#fff',
          fontSize: '14px',
          border: '1px solid #fff',
          borderRadius: '4px',
          backgroundColor: '#000',
          padding: '2px 6px'
        })
        map.addOverlay(label)
      })
      
      // 添加覆盖物
      let imgCityData = [hangzhou, ningbo, shaoxing]
      imgCityData.map(item => {
        let myIcon = new BMapGL.Icon(`${require('@/assets/images/chengWarning.png')}`, new BMapGL.Size(100, 100))
        let myPoint = new BMapGL.Point(...item.center)
        // 可以设置偏移量
        let OffsetX = -20, OffsetY = 20
        if (item.name === '绍兴') {
          OffsetX = 0
          OffsetY = 40
        }
        let myMarker = new BMapGL.Marker(myPoint, {
          icon: myIcon,
          offset: new BMapGL.Size(OffsetX, OffsetY)
        })
        map.addOverlay(myMarker)
      })
    },
    // 构建边界数组
    _makePolylineData(data){
      const arr=[]
      data.split('|').forEach((item,i) => {
        if(!arr[i]) arr[i] = []
        item.split(';').forEach(sItem => {
          const lnglat = sItem.split(',')
          arr[i].push(new BMapGL.Point(Number(lnglat[0]), Number(lnglat[1])))
        })
      })
      return arr
    },
  },

  mounted () {
    this.initMap()
    this.addMapOverlay()
  }
}
</script>

<style scoped>
  #container {
    width: 100%;
    height: 100%;
  }
  ::v-deep .bgcPoint {
    background: url('../../assets/images/chengWarning.png') no-repeat center center;
    background-size: 100% 100%;
  }
</style>